
<template>
  <Modal v-model="visible" :title="title" @on-cancel="closeModel">
    <Form
      :model="formItem"
      class="from-box"
      ref="formValidate"
      :rules="ruleValidate"
      :label-width="80"
    >
      <Form-item label="角色名称" prop="roleName">
        <Input v-model="formItem.roleName" placeholder="角色名称" />
      </Form-item>
      <Form-item label="等级" prop="alarmLevelID">
        <Select
          v-model="formItem.alarmLevelID"
          placeholder="请选择"
          class="selectbumen"
        >
          <Option v-for="item in AlarmLevelList" :value="item.id" :key="item.id">{{
            item.alarmLevelName
          }}</Option>
        </Select>
      </Form-item>
      <slot name="footer"></slot>
    </Form>
    <div slot="footer" class="dialog-footer">
      <Button type="primary" @click="confirm">确定</Button>
      <Button @click="closeModel()">取消</Button>
    </div>
  </Modal>
</template>

<script>
import {
  getAlarmLevel,
  CreateRoles,
  updateRoles
} from '@/api/system/roles.js'
export default {
  name: 'Detail',
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '新增用户'
    },
    modelType: {
      type: String,
      default: 'add'
    },
    roleInfo: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      formItem: {
        roleName: '',
        alarmLevelID: ''
      },
      AlarmLevelList: [],
      ruleValidate: {
        roleName: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
        alarmLevelID: [{ required: true, message: '请选择职务', trigger: 'change', type: 'number' }]
      }
    }
  },
  created () {
  },
  watch: {
    roleInfo: {
      // 深度监听，可监听到对象、数组的变化
      handler (val, oldVal) {
        this.formItem.roleName = this.roleInfo.roleName
        this.formItem.alarmLevelID = this.roleInfo.alarM_Level_ID
      },
      deep: true // true 深度监听
    }
  },
  mounted () {
    this.getAlarmLevelList()
  },
  methods: {
    // 获取等级
    getAlarmLevelList () {
      let that = this
      getAlarmLevel().then((res) => {
        if (res.status === 200) {
          that.AlarmLevelList = []
          that.AlarmLevelList = res.data
        } else {
          that.$Message.warning('请求失败，请联系管理员！')
        }
      })
    },
    confirm () {
      let that = this
      let params = JSON.parse(JSON.stringify(this.formItem))
      that.$refs['formValidate'].validate((valid) => {
        if (valid) {
          if (that.modelType === 'add') {
            params.alarmLevelID = Number(params.alarmLevelID)
            CreateRoles(params).then((res) => {
              if (res.status === 200 && res.data === -1) {
                that.$Message.warning('新增失败，请联系管理员！')
              } else if (res.status === 200) {
                that.$Message.success('新增成功！')
                that.$refs['formValidate'].resetFields()
                that.$emit('onCloseRolesModel')
              } else {
                that.$Message.warning('请求失败，请联系管理员！')
              }
            })
          }
          if (that.modelType === 'edit') {
            params.alarmLevelID = Number(params.alarmLevelID)
            params.roleID = that.roleInfo.id
            console.log(params)
            updateRoles(params).then((res) => {
              if (res.status === 200 && res.data === -1) {
                that.$Message.warning('编辑失败，请联系管理员！')
              } else if (res.status === 200) {
                that.$Message.success('编辑成功！')
                that.$refs['formValidate'].resetFields()
                that.$emit('onCloseRolesModel')
              } else {
                that.$Message.warning('请求失败，请联系管理员！')
              }
            })
          }
        } else {
          // this.$Message.error('表单验证失败!');
        }
      })
    },
    closeModel () {
      this.$refs['formValidate'].resetFields()
      this.$emit('onCloseRolesModel')
    }
  }
}
</script>

<style lang="less" scoped>
.dialog-footer {
  display: flex;
  justify-content: center;
  button:nth-child(1) {
    margin-right: 20px;
  }
}
.from-box {
  /deep/.ivu-select {
      .ivu-select-selected-value {
    color: #000000 !important;
  }
  }
}
</style>
